<template>
  <div>
      <Table :columns="columns10" :data="data9"></Table>
      <Modal   :draggable="true"
          v-model="modal1"
          title="编辑地址"
          :mask-closable="false">
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                  <FormItem label="名称" prop="name">
                      <Input v-model="formValidate.name" placeholder="请输入名称"></Input>
                  </FormItem>
                  <FormItem label="状态" prop="isActive">
                      <Select v-model="formValidate.isActive" placeholder="请选择状态">
                          <Option value="true">启用</Option>
                          <Option value="false">禁用</Option>
                      </Select>
                  </FormItem>
              </Form>
          <div slot="footer">
              <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
          </div>
      </Modal>
  </div>

</template>
<script>
    import tab from './tab.vue';
    export default {
        components: { tab },
        name: 'Address',
        data () {
            return {
                modal1: false,
                id: '',
                list: {},
                formValidate: {
                    name: '',
                    isActive: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '名称不能为空', trigger: 'blur' }
                    ],
                    isActive: [
                        { required: true, message: '请选择状态', trigger: 'change' }
                    ]
                },
                columns10: [
                    {
                        type: 'expand',
                        width: 50,
                        render: (h, params) => {
                            return h(tab, {
                                props: {
                                    row: params.row
                                }
                            });
                        }
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.id = params.row.id;
                                            depot.get({
                                                url: 'data/area/findAreaById?id=' + this.id,
                                                cb: (data) => {
                                                    this.list = data.data;
                                                    this.formValidate.name = data.data.name;
                                                    this.formValidate.isActive = data.data.isActive === true ? 'true' : 'false';
                                                    this.modal1 = true;
                                                }
                                            });
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row.id);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    },
                    {
                        title: '名称',
                        key: 'name'
                    },
                    {
                        title: '是否启用',
                        key: 'isActive'
                    }
                ],
                data9: []
            };
        },
        mounted () {
            this.init();
        },
        methods: {
            init () {
                depot.get({
                    url: 'data/area/findAllByParentId?parentId=1',
                    cb: (data) => {
                        console.log(data, '全部地址');
                        data.data.forEach((item, index) => {
                            let obj = {};
                            obj.id = item.id;
                            obj.name = item.name;
                            obj.isActive = item.isActive === true ? '启用' : '禁用';
                            obj.children = item.children;
                            this.data9.push(obj);
                        });
                    }
                });
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.list.name = this.formValidate.name;
                        this.list.isActive = this.formValidate.isActive;
                        depot.post({
                            url: 'data/area/updateArea',
                            data: this.list,
                            cb: (data) => {
                                console.log(data);
                                if (data.code === 0) {
                                    this.$Message.success('修改成功');
                                    setTimeout(() => {
                                        location.reload();
                                    }, 500);
                                } else {
                                    this.$Message.error(data.message);
                                }
                            }
                        });
                    } else {
                        this.$Message.error('提交失败');
                    }
                });
            },
            remove (id) {
                let ids = [id];
                depot.post({
                    url: 'data/area/deleteArea?isDel=1',
                    data: ids,
                    cb: (data) => {
                        if (data.code === 0) {
                            this.$Message.success('删除成功');
                            setTimeout(() => {
                                location.reload();
                            }, 500);
                        } else {
                            this.$Message.error(data.message);
                        }
                    }
                });
            }
        }
    };
</script>
<style>
    .ivu-table th {
        background-color: #005178;
        color: #fff;
    }
    
</style>
